<template>
  <div class="increase">
    <Module-title label="设备新增趋势图">
      <G-date-picker slot="right" v-model="queryParams.year" @change="getList" />
    </Module-title>
    <div id="chart-increase" />
  </div>
</template>
<script>
import { getDiveceGrowthList } from "@/utils/srceen";
export default {
  name: "increase-srceen",
  data() {
    return {
      queryParams: {
        year: "",
      },
      xAxis: [], // x轴列表
      yAxis: [], // y轴列表
    };
  },
  mounted() {
    this.queryParams.year = this.parseTime(Date.now(), "{y}-{m}-{d}");
    this.getList();
  },
  methods: {
    // 获取数据
    getList() {
      let params = {
        year: new Date(this.queryParams.year).getFullYear(),
      };
      getDiveceGrowthList(params).then((res) => {
        if (res && res.code === 1) {
          this.xAxis = res.data.month || [];
          this.yAxis = res.data.num || [];
          this.drawChart();
        }
      });
    },
    // 绘制图表
    drawChart() {
      let chartDom = document.getElementById("chart-increase");
      if (chartDom?.hasAttribute("_echarts_instance_"))
        chartDom.removeAttribute("_echarts_instance_");
      let myChart = this.$echarts.init(chartDom);
      let option = {
        color: "#C232B1",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
            lineStyle: {
              type: "solid",
              color: "#C232B1",
            },
          },
          className: "tooltip-class",
          formatter: (e) => {
            let item = e[0];
            return `<div class='tooltip-box'>${item.value}<br />${item.name}新增数</div>`;
          },
        },
        grid: {
          top: "12%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: this.xAxis,
            axisTick: { show: false },
            axisLabel: {
              textStyle: {
                color: "#fff",
              },
            },
            axisLine: {
              lineStyle: { color: "#4E8AB1" },
            },
          },
        ],
        yAxis: {
          name: "(单位：次)",
          nameTextStyle: {
            color: "#fff",
          },
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["rgba(255,255,255,0.2)"],
            },
          },
        },
        series: [
          {
            type: "line",
            smooth: true,
            showSymbol: true,
            areaStyle: {
              opacity: 0.8,
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#C232B1" },
                { offset: 1, color: "#051749" },
              ]),
            },
            emphasis: { focus: "series" },
            data: this.yAxis,
          },
        ],
      };
      option && myChart.setOption(option);
    },
  },
};
</script>
<style lang="scss" scoped>
.increase {
  width: 100%;
  height: 343px;
  background-color: rgba(0, 37, 111, 0.4);
  margin-top: 22px;
  #chart-increase {
    width: 100%;
    height: 295px;
  }
}
::v-deep .tooltip-class {
  padding: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  .tooltip-box {
    background-color: rgba(0, 37, 111, 0.8);
    padding: 10px;
    border-radius: 10px;
    color: #fff !important;
    text-align: center;
  }
}
</style>
